<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>数字千分位</title>
</head>

<body>


    <div style="text-align:center">
        <p><input type="number" value="5000" id="textCount" /></p>
        <p>
            <input type="button" onclick="executeTest()" value="测试" />
            <input type="button" onclick="javascript:document.getElementById('messageEl').innerHTML=''" value="清除" />
        </p>


    </div>
    <div id="messageEl" style="width: 300px;margin: auto;">

    </div>


    <script>
        function format_with_array(number) {
            var arr = (number + '').split('.');
            var int = arr[0].split('');
            var fraction = arr[1] || '';
            var r = "";
            var len = int.length;
            int.reverse().forEach(function(v, i) {
                if (i !== 0 && i % 3 === 0) {
                    r = v + "," + r;
                } else {
                    r = v + r;
                }
            })
            return r + (!!fraction ? "." + fraction : '');
        }
    </script>

    <script>
        function format_with_substring(number) {
            var arr = (number + '').split('.');
            var int = arr[0] + '';
            var fraction = arr[1] || '';
            var f = int.length % 3;
            var r = int.substring(0, f);

            for (var i = 0; i < Math.floor(int.length / 3); i++) {
                r += ',' + int.substring(f + i * 3, f + (i + 1) * 3)
            }

            if (f === 0) {
                r = r.substring(1);
            }
            return r + (!!fraction ? "." + fraction : '');
        }
    </script>

    <script>
        function format_with_mod(number) {
            var n = number;
            var r = "";
            var temp;
            var mod;
            do {
                mod = n % 1000;
                n = n / 1000;
                temp = ~~mod;
                r = (n > 1 ? `${temp}`.padStart(3, "0") : temp) + (!!r ? "," + r : "")
            } while (n > 1)

            var strNumber = number + "";
            var index = strNumber.indexOf(".");
            if (index > 0) {
                r += strNumber.substring(index);
            }
            return r;
        }
    </script>

    <script>
        function format_with_regex(number) {
            var reg = /(\d{1,3})(?=(\d{3})+(?:$|\.))/g;
            // var reg = /(\d)(?=(?:\d{3})+$)/g
            //var reg = /\d{1,3}(?=(\d{3})+$)/g;
            return (number + '').replace(reg, '$1,');
        }
    </script>

    <script>
        // function format_with_toLocaleString(number, minimumFractionDigits, maximumFractionDigits) {
        //     minimumFractionDigits = minimumFractionDigits || 2;
        //     maximumFractionDigits = (maximumFractionDigits || 2);
        //     maximumFractionDigits = Math.max(minimumFractionDigits, maximumFractionDigits);

        //     return number.toLocaleString("en-us", {
        //         maximumFractionDigits: maximumFractionDigits || 2,
        //         minimumFractionDigits: minimumFractionDigits || 2
        //     })
        // }

        function format_with_toLocaleString(number) {
            return number.toLocaleString("en-us")
        }
    </script>

    <script>
        // function format_with_Intl(number, minimumFractionDigits, maximumFractionDigits) {
        //     minimumFractionDigits = minimumFractionDigits || 2;
        //     maximumFractionDigits = (maximumFractionDigits || 2);
        //     maximumFractionDigits = Math.max(minimumFractionDigits, maximumFractionDigits);

        //     return new Intl.NumberFormat('en-us', {
        //         maximumFractionDigits: maximumFractionDigits || 2,
        //         minimumFractionDigits: minimumFractionDigits || 2
        //     }).format(number)
        // }


        const format = new Intl.NumberFormat('en-us');

        function format_with_Intl(number) {
            return format.format(number)
        }
    </script>


    <script>
        function getData(count) {
            var data = new Array(count).fill(0).map(function(i) {
                var rd = Math.random();
                var r = rd * Math.pow(10, Math.trunc(Math.random() * 12));
                if (rd > 0.5) {
                    r = ~~r;
                }
                return r
            })
            return data;
        }

        function test(data, fn, label) {
            var start = performance.now();
            for (var i = 0; i < data.length; i++) {
                fn(data[i]);
            }
            var time = performance.now() - start;

            message((fn.name || label) + ":" + time.toFixed(2) + "ms");
        }


        function executeTest() {
            var data = getData(+textCount.value);
            test(data, format_with_array);
            test(data, format_with_mod);
            test(data, format_with_substring);
            test(data, format_with_regex);
            test(data, format_with_toLocaleString);
            test(data, format_with_Intl);
            message("-------------------")
        }

        function message(msg) {
            var el = document.createElement("p");
            el.innerHTML = msg;
            messageEl.appendChild(el);
        }
    </script>


</body>

</html>